<!DOCTYPE html>
<head>

    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,  user-scalable=no">

    <title>GMFM粗大运动功能评估</title>

    <!--<link href="/css/bootstrap.min.css" rel="stylesheet">-->
    <!--<link href="/css/font-awesome/css/font-awesome.css" rel="stylesheet">-->

    <!--<link href="/css/animate.css" rel="stylesheet">-->
    <!--<link href="/css/style.css" rel="stylesheet">-->
    <!--<link href="/css/ics/common.css" rel="stylesheet">-->


    <style>
        /*.table-a table{border:1px solid #000000}*/
        /*body {*/
            /*border: solid 1px grey;*/
        /*}*/

        td {
            vertical-align: bottom;
        }

        .group-1 {
            /*padding-left: 5%;*/
            /*padding-right: 5%;*/

        }

        .g-1-title {
            /*color: red;*/
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 30px;
        }

        .group-2 {
            /*border-bottom: solid 1px black;*/
            /*margin-bottom: 30px;*/
        }

        /*.group-2:first-child {*/
        /*border-top: solid 1px black;*/
        /*}*/

        .g-2-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 6.5px;
        }

        .question {
            /*border-top: dashed 1px grey;*/
        }

        .question:last-child {
            /*border-bottom: dashed 0 grey;*/
        }

        .question .q {
            text-align: left;
            font-size: 14px;
            font-weight: bold;
            /*padding-left: 2%;*/
            /*border-bottom: dashed 1px grey;*/
        }

        .question .o {
            text-align: left;
            padding-left: 33%;
            border-bottom: dashed 1px #d0d0d0;
            margin-bottom: 13.5px;

        }

        .question .o label {
            font-weight: 400;
            display: block;
            /*width: 30%;*/
            vertical-align: top;
            margin-bottom: 6.5px;
        }

    </style>


</head>
<body>
<form>

    <div class="m-b-lg">
        <div style="font-size: 16px;height: 26px;/*margin-bottom: 26px;*/border-bottom: 1px solid #d0d0d0;">
            <label class="print-font16">评定内容</label>
        </div>
        <div class="hide">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td align="left" width="80px"><label style="font-size: 13px">陪同者</label></td>
                    <td align="left"><input type="text" class="form-control" name="companion">
                    </td>
                </tr>
            </table>

        </div>
    </div>
    <!--<div class="form-inline m-b" style="margin-left: 5%">-->
    <!--<div class="form-group">-->
    <!--<label>-->
    <!--陪同者-->
    <!--</label>-->
    <!--<input type="text" class="form-control" name="companion">-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="row">-->
    <div class="">
        <div class="group-1 ">

            <div class="group-2">
                <div class="question">
                    <div class="q">
                        腰痛腿痛程度
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            无任何疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            轻微疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            疼痛中等
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            严重疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            疼痛相当严重
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            疼痛异常疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        个人生活料理情况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            正常料理个人生活，不会增加任何疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            能够正常料理个人生活，但非常疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            料理个人生活时疼痛，动作缓慢且小心
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            需要一些帮助，但可完成绝大部分个人料理
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            绝大部分个人料理都需要帮助才能完成
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            不能穿衣，洗漱有困难，需要卧床
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        提举重物情况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            提举重物时不会增加疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            能够提举重物，但疼痛有些增加
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            由于疼痛，不能将重物从地上提起，但如位置合适，可提起放在桌上的重物
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            由于疼痛，不能将重物从地上提起，但如位置合适，可提起较轻物品
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            能提举起较轻物品
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            不能提举或携带任何物品
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        行走状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            疼痛不影响行走
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            由于疼痛，行走不超过4里路
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            由于疼痛，行走不超过2里路
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            由于疼痛，行走不超过100米
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            只能借助拐杖或腋杖行走
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            大多数时间卧床，只能爬行去厕所
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        坐立状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            可以坐在任何座椅上，时间不受限制
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            能够坐在合适的座椅上，时间不受限
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            由于疼痛，坐立不能超过1小时
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            由于疼痛，坐立不能超过半小时
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            由于疼痛，坐立不能超过10分钟
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            由于疼痛，根本不能坐立
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        站立状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            能任何长时间站立，不会增加疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            能任何长时间站立，但会增加疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            由于疼痛，站立不能超过1小时
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            由于疼痛，站立不能超过半小时
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            由于疼痛，站立不能超过10分钟
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            由于疼痛，根本不能站立
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        睡眠状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            睡眠从来不受疼痛困扰
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            偶尔因疼痛影响睡眠
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            因疼痛，每天睡眠不到6h
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            因疼痛，每天睡眠不到4h
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            因疼痛，每天睡眠不到2h
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            因疼痛，根本无法入睡
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        性生活状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            性生活完全正常，疼痛不会增加
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            性生活正常，但疼痛会有所增加
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            性生活基本正常，但会引起严重疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            疼痛严重影响性生活
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            由于疼痛，几乎没有性生活
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            由于疼痛，完全没有性生活
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        社会生活状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            社会生活完全正常，不会增加疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            活生活正常，但疼痛会有所加重
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            疼痛对社会生活影响不大，但会限制大体力运动
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            疼痛对社会生活有影响，基本不出家门
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            由于疼痛，只能在家中进行社会生活
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            由于疼痛，没有任何社会生活
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>


                <div class="question">
                    <div class="q">
                        旅行状况
                    </div>
                    <div class="o">
                        <label>
                            <input type="radio" name="" value="0">
                            可以自用旅行，不伴疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="1">
                            可到任何地方旅行，但会有些疼痛
                        </label>
                        <label>
                            <input type="radio" name="" value="2">
                            疼痛较重，但可应付2h以上旅行
                        </label>
                        <label>
                            <input type="radio" name="" value="3">
                            由于疼痛，旅行不能超过1h
                        </label>
                        <label>
                            <input type="radio" name="" value="4">
                            由于疼痛，旅行不能超过半小时
                        </label>
                        <label>
                            <input type="radio" name="" value="5">
                            由于疼痛，不能旅行
                        </label>
                        <label>
                            <input type="radio" name="" value="-1">
                            不适合评估
                        </label>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--</div>-->

    <div class="m-b-lg">
        <div id="div_edit" class="" style="margin-top: 26px;border-bottom: 1px solid #d0d0d0;">
            <label style="font-size: 16px;font-weight: bold;">评定结果</label>
        </div>
        <table id="table_total" class="table table-bordered " style="width: 100%;margin: 26px auto;font-size: 13px;"
               border="1" cellspacing="0"
               cellpadding="0">
            <tr>
                <td width="50%" align="center"><span>总评分</span></td>
                <td width="50%" align="center" id="total-score"></td>
            </tr>
        </table>
    </div>

    <div class="form-group" style="margin-top: 20px" id="submit-buttons">
        <div class="col-sm-12">
            <button class="btn btn-white col-sm-2 col-sm-offset-3" onclick="myReset();" type="button">重置</button>

            <button class="btn btn-primary col-sm-2 col-sm-offset-2" onclick="submitGaugeResult()" type="button"
            >提交
            </button>
        </div>
    </div>
</form>
</body>

<script>
    var upperLimbScore = 0;
    var lowerLimbScore = 0;

    var totalRatio = 0;
    var totalScore = 0;

    function getCount() {
        var groups = $(".group-1");

        totalScore = 0;

        var selectedCount = 0;
        var radios = $(".group-1 .question input[type='radio']:checked");
        $.each(radios, function (i, radio) {
            var r = parseInt($(radio).val());
            if (r != -1) {
                totalScore += parseInt($(radio).val());
                selectedCount++;
            }
        });
        debugAlert(totalScore);
        debugAlert(radios.length);

        if (totalScore != 0) {
            totalScore = (totalScore / (5 * selectedCount)) * 100;
        }

        $("#total-score").text(parseInt(totalScore) + "%");
    }

    function initRadioName() {
        var g1s = $(".group-1");
        $.each(g1s, function (g1Idx, g1) {
            var g2s = $(g1).find(".group-2");
            $.each(g2s, function (g2Idx, g2) {
                var questions = $(g2).find(".question");
                $.each(questions, function (qIdx, q) {
                    $(q).find("input[type=radio]").attr("name", g1Idx + "-" + g2Idx + "-" + qIdx);
                });
            });
        });
    }

    initRadioName();

    $(".group-1 input[type='radio']").attr("onclick", "getCount();");

    function getGaugeResult() {
        var result = {};
        result.questions = [];

        result.companion = $("input[name='companion']").val();

        var questions = $(".group-1 .question");

        for (var i = 0; i < questions.length; i++) {
            var checkedRes = $(questions[i]).find("input[type='radio']:checked");
            if (checkedRes.length == 0) {
                var q = $(questions[i]).find("div.q").text();
                utils.msgError("请填写问题：“" + q + "”");
                $(questions[i]).find("input[type='radio']:first").focus();
                return null;
            } else {
                var res = {};
                res.key = $(checkedRes).attr("name");
                res.value = $(checkedRes).val();

                result.questions.push(res);
            }
        }

        debugAlert(result);
        return result;
    }

    function setGaugeResult(result) {


        $("input[name='companion']").val(result.companion == null || result.companion == '' ? '无' : result.companion);

        $.each(result.questions, function (idx, q) {
            $(".group-1 input[type='radio'][name='" + q.key + "'][value='" + q.value + "']").prop("checked", "checked");
        });
        getCount();
    }

    function setEditable(edit) {
        if (edit) {
            $("input").removeAttr("disabled");
            $(".group-1 input[type='radio']").removeAttr("disabled");
            $("#submit-button").removeClass("hide");
        } else {
            $("input").attr("disabled", "disabled");
            $(".group-1 input[type='radio']").attr("disabled", "disabled");
            $("#submit-buttons").addClass("hide");
        }
    }
</script>

</html>
